import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight
} from 'react-native';
import  Swiper  from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
import styles from './styles';
const { width, height } = Dimensions.get('window')
export default class WelcomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
        };
        AsyncStorage.getItem('isfirst').then((result)=>{
            if(result==='1'){
                this.onbegin();
            }
        })
    }
    static navigationOptions = {
        title: 'Welcome',
        header: null,  //隐藏顶部导航栏
        tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    }
    componentWillMount(){
        //组件将要被加载到视图之前调用
    }
    componentDidMount(){
        // 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作
        // *** 因为UI已经成功渲染，而且这里面是异步的，所以放在这个函数进行数据的请求等复杂的操作，不会出现UI错误**

    }
    shouldComponentUpdate(nextProps, nextState){
        //一般用于优化，可以返回false或true来控制是否进行渲染(true 的话进行下2步操作，false不会进行下去)
        /*
        console.log(this.state.detailContent,'detailContent');
        if (this.state.count !== nextState.count) {
            console.log("shouldComponentUpdate1111---组件需要更新");
            return true;
        }
        return false;
        */
    }

    componentWillUpdate(){
        //组件刷新前调用
        console.log("componentWillUpdate1111---组件将要更新");
    }

    componentDidUpdate(){
        //更新后
        console.log("componentDidUpdate1111---组件更新完毕");
    }
    componentWillReceiveProps(nextProps){
        //指父元素对组件的props或state进行了修改
        // 在子组件中对父元素props或state的改变进行监听进行相应的操作
        //console.log(this.props.detailContent,'this--->>componentWillReceiveProps');
        //console.log(nextProps.detailContent,'next--->>componentWillReceiveProps')
    }
    componentWillUnmount(){
        //销毁阶段函数功能分析
        //用于清理一些无用的内容，比如：定时器清除
    }
    onbegin(){
        AsyncStorage.setItem('isfirst','1');
        this.props.navigation.navigate('Home',{
            user_id:1000,
            otherParam: 'anything you want here',
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <StatusBar translucent={ true } backgroundColor="transparent" />
                <View style={styles.swiper}>
                    <Swiper
                        style={styles.wrapper}
                        showsButtons={false} // 分页风格
                        paginationStyle={styles.paginationStyle}
                        // 点样式
                        dotStyle={styles.dotStyle}
                        // 活动点样式
                        activeDotStyle={styles.activeDotStyle}
                        loop={false}
                    >
                        <View>
                            <Image style={{width:width,height:height}} source={require('../../image/yd1.jpg')} />
                        </View>
                        <View>
                            <TouchableHighlight onPress={this.onbegin.bind(this)}>
                                <Image style={{width:width,height:height}} source={require('../../image/yd2.jpg')} />
                            </TouchableHighlight>
                        </View>
                    </Swiper>
                </View>
            </View>
        )
    }
}

